<template>
  <van-list v-model="loading" class="mb" :finished="finished" @load="onLoad">
    <div v-for="i in list" :key="i.id" class="list" @click="goto(i)">
      <div class="title">
        <div class="label">{{ i.label }}</div>
        <div class="updated">{{ $t.formatDate(new Date(i.updated)) }}</div>
      </div>
      <div class="tags">
        <div v-for="j in i.tags" :key="j.id">
          <van-tag type="primary" :plain="true">{{ j }}</van-tag>
        </div>
      </div>
      <div class="user">
        <div class="img">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="i.user[0].coverUrl | imageUri"
          />
        </div>
        <div class="userinfo">
          <div class="name">{{ i.user[0].name }}</div>
          <div class="detail">
            <div>博客数：{{ i.user[0].skillNumber }}</div>
            <div>点击量：{{ i.watch }}</div>
            <div>评论数：{{ i.comment.length }}</div>
          </div>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      pageData: {
        limit: 20,
        skip: 0
      }
    }
  },
  created() {
    const params = this.$route.params
    const req = Object.assign({ type: params.id }, this.pageData)
    this.blogsDataType(req).then((res) => {
      if (res.data.ok === 1) {
        console.log(res.data.data)
        this.list = res.data.data
      }
    })
  },
  methods: {
    onLoad() {
      console.log(39)
    },
    goto(data) {
      console.log(data)
      this.$router.push(`/blogdetail/${data._id}`)
    },
    ...mapActions(['blogsDataType'])
  }
}
</script>

<style lang="scss" scoped>
.van-list {
  width: 100%;
  min-height: calc(100vh - 96px);
  padding: 0 10px;
}
.list {
  border-bottom: 1px solid #eee;
}
.title {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .label {
    font-weight: 700;
    font-size: 18px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .updated {
    flex: 0 0 auto;
    font-size: 12px;
  }
}
.tags {
  display: flex;
  .van-tag {
    margin-right: 6px;
  }
}
.user {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  height: 40px;
  overflow: hidden;
  margin: 10px 0;
  .img {
    flex: 0 0 40px;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
  }
  .userinfo {
    flex: 1;
    height: 100%;
    font-size: 14px;
    padding-left: 10px;
    .name {
      width: 100%;
      height: 50%;
    }
    .detail {
      width: 100%;
      height: 50%;
      display: flex;
      div {
        margin-right: 10px;
      }
    }
  }
}
</style>
